﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Terminal Server</title>
    <link rel="shortcut icon" href="favicon.ico">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src="http://vtortola.github.io/ng-terminal-emulator/src/vtortola.ng-terminal.js"></script>
    <script src="content/scripts/app.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://vtortola.github.io/ng-terminal-emulator/src/vtortola.ng-terminal.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet" type="text/css">
    <link href="content/styles/app.css" rel="stylesheet" />
    <!--http://angular-ui.github.io/bootstrap/-->
</head>
<body ng-app="terminalServer" ng-controller="mainController">
    <section id="header">
        <h1>WebSocketListener: Terminal Server</h1>
        <span class="user-info" ng-show="websocketAvailable">UserId:  {{userId}}</span>
        <a class="glyphicon glyphicon-signal" title="Websocket connected" ng-show="websocketAvailable"></a>
        <a class="glyphicon glyphicon-exclamation-sign" title="No websocket connection" ng-show="!websocketAvailable"></a>
    </section>
    <section id="sidebar">
    </section>
    <div class="btn-group create-terminal-menu" dropdown is-open="status.isopen">
        <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
            Create terminal <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
            <li><a href="#" ng-click="createConsole('cmd.exe')">Cmd.exe</a></li>
            <li><a href="#" ng-click="createConsole('powershell')">Powershell</a></li>
        </ul>
    </div>
    <section id="content">
        <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
        <section id="terminals">
            <tabset>
                <tab>
                    <tab-heading>
                        <span class="terminal-tab-heading">Start</span>
                    </tab-heading>
                    <div class="start">
                        <h3>Terminal server example</h3>
                        <p>This is an example of <a href="http://vtortola.github.io/WebSocketListener/" target="_blank">WebSocketListener</a> as backend of a Websocket based Single Page Application.</p>
                        <p>The project <a href="http://vtortola.github.io/ng-terminal-emulator/" target="_blank">ng-terminal-emulator</a> is being used for the Javascript terminals.</p>
                        <br/>
                        <p>You can create a "cmd.exe" or "powershell" command session with the buttons on the right.</p>
                        <br/>
                        <p>A cookie maintains a user ID that is the same across tabs.</p>
                        <p>A websocket connection parameter maintains the connection ID that is the same across tab refreshes.</p>
                        <p>Different tabs have different connection ID but same user ID.</p>
                    </div>
                </tab>
                <tab ng-repeat="terminal in terminals" ng-controller="consoleController" ng-init="init(terminal)" 
                     select="select()" deselect="deselect()">
                    <tab-heading>
                        <span class="terminal-tab-heading">{{tabHeader}}</span>
                        <a class="glyphicon glyphicon-download-alt" href="#" ng-class="{transparent: !pendingOutput}"></a>
                        <a class="glyphicon glyphicon-off" href="#" ng-click="close()"></a>
                    </tab-heading>
                    <div>
                        <div class="terminal-container">
                            <terminal></terminal>
                        </div>
                    </div>
                </tab>
            </tabset>
        </section>
    </section>
</body>
</html>
